<template>
  <div class="index">
    <nav-bar></nav-bar>
    <div class="mid-width">
      <el-row><h3>&nbsp;</h3></el-row>
      <el-row>
          <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/index' }">&nbsp;&nbsp;<i class="el-icon-house"></i>&nbsp;&nbsp;首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">{{this.$route.query.typeId | nameTit}}</a></el-breadcrumb-item>
          </el-breadcrumb>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="16">
            <content-detail :article=article :loading=loading ></content-detail>
        </el-col>
        <el-col :span="8" tag="div" class="left-pox">
          <dl class="user-info">
            <dt><el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>
            <dd>小宇童鞋</dd>
            <dd>102篇文章</dd>
            <dd><el-button type="primary" size="medium"><i class="el-icon-plus"></i>&nbsp;&nbsp;关注</el-button></dd>
          </dl>
          <hot-list :hot-list=hotList></hot-list>
        </el-col>
      </el-row>

    </div>
    <footer-bar></footer-bar>
  </div>
</template>

<script>
  import navBar from '../components/navbar'
  import contentDetail from '../components/contentDetail'
  import footerBar from '../components/footer'
  import hotList from '../components/hotList'
  import {apiData} from '../interface/api';
  export default {
    name: 'index',
    data () {
      return {
        article:{},
        typeId:this.$route.query.typeId,
        newsId:this.$route.query.newsId,
        curPage:1,
        pageSize:10,
        hotList:[
        {
          id:1,
          title:"申报与考评办法21",
          imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          dec:"会议指出，按照《福建省森林城市（县城）申报与考评办法》创建指标体系要求"
        },
        {
          id:2,
          title:"美计划调高对华商品增税31",
          imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          dec:"美计划调高对华商品增税，外交部：是呀与讹诈不会起作用"
        },
        {
          id:3,
          title:"美计划调高对华商品增税",
          imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          dec:"美计划调高对华商品增税，外交部：是呀与讹诈不会起作用"
        }
        ],
        loading: true
      };
    },
    methods:{
      async newList(method, url, obj){
          const res = await apiData.policyList(method, url, obj)
          console.log(res)
          if(res.data){
              this.loading = false;
              this.article = res.data.list[0]
          } else {
              this.loading = true;
              this.$message({
                  message: '数据加载失败',
                  type: 'warning'
              });
          }

      }
    },
    mounted() {
        this.newList("post", `/web/newsList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {newsId:this.newsId})
    },
    filters:{
      nameTit(id){
          let pageTit =4;
          switch (id){
              case 1:
                  pageTit = "政策法规";
                  break;
              case 2:
                  pageTit = "通知公告";
                  break;
              case 3:
                  pageTit = "文件下载";
                  break;
              case 4:
                  pageTit = "土地信息";
                  break;
          }
          return pageTit
      }
    },
    components: {
      navBar , contentDetail, footerBar, hotList
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .index {
  .left-pox {
          position: sticky;
          top: 140px;
        }

        .user-info {
          padding:30px 20px;
          background-color: #fafafa;
          margin-bottom: 18px;
          dt,dd{
            text-align: center;
            line-height: 40px;
          }
        }
  }

</style>
